

























<template>
  <div class="col-sm-12">
    <div class="card-box">
      <el-form :inline="true" :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 30%;">
        <el-form-item prop="name" >
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchUsers()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button size="mini" type="danger" icon="el-icon-delete" @click="BatchdeleteUser()">删除选中员工</el-button>
      <!--       <div style="margin-top: 20px">
           <el-button @click="toggleSelection()">取消选择</el-button>
         </div> -->
      <table v-if="ps=='超管'" class="table">
        <thead>
          <tr>
            <th style="width:20px"></th>
            <th>工号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>部门</th>
            <th>身份</th>
            <th style="width:15%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in data" :key="index">
            <input type="checkbox" style="margin-top:10px" :value="item.userId" v-model="checkVal">
            <td>{{item.userNumber}}</td>
            <td>{{item.name}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.department}}</td>
            <td>{{item.permission}}</td>
            <td>
              <el-button-group>
                <el-button type="primary" icon="el-icon-edit-outline" size="mini" @click="editUser(item.userId,item.userNumber,item.name,item.sex,item.phoneNumber,item.email,item.department,item.permission,item.state,item.password)"></el-button>
                <el-popover popper-class="popoverBackB" placement="top" width="50">
                  <div style="text-align: center;">
                    <el-button type="danger" size="mini" @click="deleteUser(item.userId)">话说，您确定?</el-button>
                  </div>
                  <el-button size="mini" type="primary" icon="el-icon-delete" slot="reference"></el-button>
                </el-popover>
              </el-button-group>

            </td>
          </tr>
        </tbody>
      </table>
      <table v-if="ps=='管理员'" class="table">
        <thead>
          <tr>
            <th style="width:20px"></th>

            <th>工号</th>
            <th>姓名</th>
            <th>性别</th>
            <th style="width:15%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in data" :key="index">
            <input type="checkbox" style="margin-top:10px" :value="item.userId" v-model="checkVal">
            <td>{{item.userNumber}}</td>
            <td>{{item.name}}</td>
            <td>{{item.sex}}</td>
            <td>
              <el-button-group>
                <el-button type="primary" icon="el-icon-edit-outline" size="mini" @click="editUser(item.userId,item.userNumber,item.name,item.sex,item.phoneNumber,item.email,item.department,item.permission,item.state,item.password)"></el-button>
                <el-popover popper-class="popoverBackB" placement="top" width="50">
                  <div style="text-align: center;">
                    <el-button type="danger" size="mini" @click="deleteUser(item.userId)">话说，您确定?</el-button>
                  </div>
                  <el-button size="mini" type="primary" icon="el-icon-delete" slot="reference"></el-button>
                </el-popover>
              </el-button-group>
            </td>
          </tr>
        </tbody>
      </table>
      <br>
      <div align="center" >
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, prev, pager, next, jumper" :total="parseInt(this.total)">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkVal: [],
        ps: this.$store.state.permission,
        ids:'',
        currentPage: 1, //初始页
        pagesize: 6,
        ruleForm: {
          name: '',
        },
      };
    },
    props: ['data', 'path','total'],
    methods: {
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function(size) {
        this.pagesize = size;
      },
      handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage;
        this.$parent.loadUsers(this.currentPage,this.pagesize);
      },
      editUser(userId, userNumber, name, sex, phoneNumber, email, department, permission, state, password) {
        console.log(Number);
        this.$router.push({
          path: '/manage/modifyworker',
          query: {
            userId: userId,
            userNumber: userNumber,
            name: name,
            sex: sex,
            phoneNumber: phoneNumber,
            email: email,
            department: department,
            state: state,
            permission: permission,
            password: password,
          }
        });
      },
      deleteUser(Number) {
        console.log(Number);
        if (this.ps == "超管") {
          this.$axios.delete('/api/taoyun/v1/SAdmin/userManage/deleteUser', {
              params: {
                AdminId: this.$store.state.userId,
                userId: Number,
              }
            }).then(res => {
              console.log(res);
              this.$notify.success({
                title: '成功',
                message: '删除用户成功，2s后刷新',
              });
              setTimeout(function() {
                location.reload();
              }, 500);
            })
            .catch(err => {
              console.log(err)
            });
        }
        if(this.ps=="管理员"){
          this.$axios.delete('/api/taoyun/v1/Admin/userManage/DeleteUser', {
              params: {
                AdminId: this.$store.state.userId,
                userId: Number,
              }
            }).then(res => {
              console.log(res);
              this.$notify.success({
                title: '成功',
                message: '删除用户成功，2s后刷新',
              });
             setTimeout(function() {
               location.reload();
             }, 500);
            })
            .catch(err => {
              console.log(err)
            });
        }
      },
      BatchdeleteUser(){
        this.ids=this.checkVal.join(',');
        if(this.ps=="管理员"){
        this.$axios.delete('/api/taoyun/v1/Admin/userManage/DeleteUserBatch', {
            params: {
              AdminId: this.$store.state.userId,
              ids : this.ids,
            }
          }).then(res => {
            console.log(res);
            this.$notify.success({
              title: '成功',
              message: '删除用户成功，2s后刷新',
            });
            setTimeout(function() {
              location.reload();
            }, 500);
          })
          .catch(err => {
            console.log(err)
          });
          }
          if(this.ps=="超管"){
            this.$axios.delete('/api/taoyun/v1/SAdmin/userManage/DeleteUserBatch', {
                params: {
                  AdminId: this.$store.state.userId,
                  ids : this.ids,
                }
              }).then(res => {
                console.log(res);
                this.$notify.success({
                  title: '成功',
                  message: '删除用户成功，2s后刷新',
                });
                setTimeout(function() {
                  location.reload();
                }, 500);
              })
              .catch(err => {
                console.log(err)
              });
          }
      },
      searchUsers() {
        let userList = [];
        let sum='';
        if (this.ps == "超管") {
          this.$axios.get('/api/taoyun/v1/Admin/userManage/SearchStaffByName', {
              params: {
                name:this.ruleForm.name,
                Department: '',
                page: 1,
                size: 6,
              },
            })
            .then(res => {
             userList = res.data.data.list;
             sum=res.data.data.total;
             this.$parent.set_userlist(userList,sum);
            })
            .catch(err => {
              console.log(err.response)
            })
        } if (this.ps == "管理员") {
          this.$axios.get('/api/taoyun/v1/Admin/userManage/SearchStaffByName', {
              params: {
                Department: this.$store.state.department,
                name:this.ruleForm.name,
                page: 1,
                size: 6,
              },
            })
            .then(res => {
              userList = res.data.data.list;
              sum=res.data.data.total;
              this.$parent.set_userlist(userList,sum);
            })
            .catch(err => {
              console.log(err.response)
            })
        }
      },
      open1() {
        this.$notify({
          title: '成功',
          message: '这是一条成功的提示消息',
          type: 'success'
        });
      },
      getvalue() {
        console.log(this.checkVal);
      },
      // toggleSelection(rows) {
      //         if (rows) {
      //           rows.forEach(row => {
      //             this.$refs.multipleTable.toggleRowSelection(row);
      //           });
      //         } else {
      //           this.$refs.multipleTable.clearSelection();
      //         }
      //       },

    },
  };
</script>
<style scoped>
  .popoverBackB {
    /* #303133是el-tooltip的背景色 */
    background-color: transparent !important;
  }

  .popoverBackB .popper__arrow::after {
    /* 注意：placement位置不同，下面的属性不同 */
    border-bottom-color: transparent !important;
  }
</style>
